<template>
	<view class="coupon">
	    <view class="coupon-top">
			<slot name=header></slot>
		</view>
	    <view class="coupon-middle">
	        <view class="line"></view>
			<view class="bg-div"></view>
	    </view>
	    <view class="coupon-bottom">
			<slot name="body"></slot>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.coupon {
	    width: 100%;
	    border-radius: 16rpx;
	    overflow: hidden;
	    display: flex;
	    flex-direction: column;
	}
	.coupon-top, .coupon-bottom {
	    background: #FF0009;
	}
	.coupon-top {
	    flex: 1;
	}
	.coupon-bottom {
	    height: auto;
	    padding: 0 38rpx;
	}
	.coupon-middle {
	    height: 40rpx;
	    position: relative;
	    overflow: hidden;
	}
	.coupon-middle .line { /* 中间虚线 */
	    position: absolute;
	    left: 36rpx;
	    right: 36rpx;
	    top: 19rpx;
	    border-top: 2rpx dashed #E6E6E6;
	    z-index: 9;
	}
	.coupon-middle .bg-div{
		background-color: #FF0009;
		height:40rpx;
		margin:0 40rpx;
	}
	.coupon-middle:before, .coupon-middle:after {
	    content: '';
	    border: 45rpx solid #FF0009;
	    position: absolute;
	    width: 40rpx;
	    height: 40rpx;
	    border-radius: 50%;
	    top: 50%;
	    margin-top: -65rpx;
	}
	.coupon-middle:before {
	    left: -65rpx;
	}
	.coupon-middle:after {
	    right: -65rpx;
	}
</style>